<template>
	<view>
		<ul class="timeline">
			<li>
				<view class="timeline-left">
					<view class="timeline-dot"></view>
					<view class="timeline-line-end"></view>
				</view>
				<view class="timeline-content">
					<view>
						<text>2021-10-27 19:00</text>
					</view>
					<view>
						<view>飞机XX0011 由大连飞往太原</view>
					</view>
				</view>
			</li>
			<li>
				<view class="timeline-left">
					<view class="timeline-line-start"></view>
					<view class="timeline-dot"></view>
				</view>
				<view class="timeline-content">
					<view>
						<text>2021-10-27 21:00</text>
					</view>
					<view>
						<view>打车回家</view>
						<view>太原武宿国际机场->龙腾小区</view>
					</view>
				</view>
			</li>
		</ul>
		<view class="addTripButton" @click="addTrip">＋</view>
	</view>
</template>

<script>
	export default {
		methods: {
			addTrip() {
				uni.navigateTo({
				    url: '/pages/trip/details/addPlan',
					fail (error) {
					        console.log(error)
					    }
				});
				// uni.navigateTo({
				// 	url: url
				// })
				console.log(1)
			}
		},
		created:function(){
			console.log("11");
			
		},
		onShow() {
			console.log("123")
		},
		onLoad() {
			console.log("456")
		},
	}
</script>

<style>
	.timeline {
		
	}
	.timeline li {
		list-style-type:none;
		height: 200rpx;
	}
	.timeline-left {
		position: absolute;
		width: 30rpx;
		height: 200rpx;
		left: 10rpx;
		/* background-color: #808080; */
	}
	.timeline-dot {
		width: 30rpx;
		height: 30rpx;
		border: 5rpx solid #41a863;
		border-radius: 50%;
		background-color: #FFFFFF;
		position: absolute;
		top: 85rpx;
		box-sizing: border-box;
		z-index: 1;
	}
	.timeline-line-start {
		position: absolute;
		top: 0;
		left: 12.5rpx;
		width: 5rpx;
		height: 100rpx;
		background-color: #41a863;
		z-index: 0;
	}
	.timeline-line-end {
		position: absolute;
		bottom: 0;
		left: 12.5rpx;
		width: 5rpx;
		height: 100rpx;
		background-color: #41a863;
		z-index: 0;
	}
	.addTripButton {
		background-color: #41a863;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		font-size: 50rpx;
		position: absolute;
		bottom: 50rpx;
		right: 50rpx;
	}
	.addTripButton:active {
		background-color:  #52d37b;
	}
</style>
